<template>
  <div>
    <div>{{ title }}</div>
    <div>isShow:{{ isShow }}</div>
    <button @click="send">给父组件传值</button>
    <button @click="emit('update:isShow', !isShow)">
      v-model更改isShow的值
    </button>

    <slot :data="title"></slot>
  </div>
</template>

<script setup lang="ts">
import { useAttrs, useSlots } from "vue";
// useAttrs可以获取传过来的属性
console.log(useAttrs(), useSlots(),777);
/**
 * 父传子，有以下三种方式
 */
// const props = defineProps<{ title: string }>();
const props = withDefaults(defineProps<{ title: string; isShow: boolean }>(), {
  title: "通讯",
  isShow: false,
});
// const props = defineProps({
//   title: {
//     type: String,
//     default: "通讯",
//   },
// });

/**
 * 子传父，有以下两种方式
 */
// const emit = defineEmits(["_click"]);
const emit = defineEmits<{
  (e: "_click", name: string): void;
  (e: "update:isShow", isShow: boolean): void;
}>();
const send = () => {
  emit("_click", "123");
};

defineExpose({
  // 导出方法和属性
  handle: () => {
    console.log(123);
  },
  age: 18,
});
</script>

<style lang="scss" scoped></style>
